import s from './style.module.less'
import { useState ,useEffect} from 'react'
import qs from 'query-string'
import {get } from '../../utils'
import{LeftOutlined,SmallDashOutlined,DownCircleOutlined } from '@ant-design/icons'
import { useNavigate } from 'react-router-dom'
const ChatBox=()=>{
   const navigate=useNavigate()
    const {id}=qs.parse(location.search)//注意id是字符串
    const [item, setItem] = useState([
        {
            id: 1,
            name: '新的朋友',
            title: '新的朋友',
            avatar: ''
        }
    ])
    useEffect(() => {
        GetMe()
    }, [])
    async function GetMe() {
        let { data } = await get(`/api/connect`)
        console.log(data.list,'--data.list');
        
       setItem( data.list.filter((i:any)=>i.id==id))
    }
    console.log(item,'--item');
    
    
    
    return <>
    <div className={s.chat}>
    <div className={s.head}>
    <i onClick={()=>navigate(-1) } className={s.left}><LeftOutlined /></i>
    <div>{item[0].id == id && item[0].name}</div>
    <i><SmallDashOutlined /></i>
    </div>
    <div className={s.bottom}>
         <i className={s.left}><DownCircleOutlined /></i>
         <input type='text'/>
    </div>
    </div>
    </>
}
export default ChatBox